import Taro from '@tarojs/taro';
import {Image, View, Text} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {AtInput} from 'taro-ui'
import {appConfig, request, unite} from '../../../utils/index';
import home from '../../../asset/images/home.png';
import search from '../../../asset/images/search_icon.png';
import search1 from '../../../asset/images/search.png';
import './search.scss';
import {actionCreator} from "../../../store/actions";

class CourseDetail extends Taro.Component {
    config = {
        navigationBarTitleText: '搜索',
        backgroundColor: '#fff',
        enablePullDownRefresh: true
    };

    state = {
        title: '',
        searchData: [],
    };

    componentDidMount() {
        const {getData} = this.props;
        this.setState({
            searchData: getData
        });
        console.log(getData)
    }

    //input内容保存
    datum = (name, val) => {
        this.setState({
            [name]: val
        })
    };

    thTitle = (item, ix) => {
        //ix 1人数  2课程类型  3时间   4日期
        const {getSearchTitle} = this.props;
        var title = '';
        if (ix == 1) { //人数
            title = {
                ix: ix,
                text: item.scaleName,
                id: item.scaleId,
            }
        } else if (ix == 2) { //课程类型
            title = {
                ix: ix,
                text: item.classTypeName,
                id: item.classTypeID,
            }
        } else if (ix == 3) { //时间
            title = {
                ix: ix,
                text: item.periodName,
                id: item.periodID,
            }
        } else if (ix == 4) { //日期
            title = {
                ix: ix,
                text: item.classDate,
                id: item.classDate,
            }
        }
        getSearchTitle(title);
        Taro.navigateBack({
            delta: 1
        })
    };

    skipIndex = () => {
        Taro.switchTab({
            url: `/pages/index/index`
        })
    };


    render() {
        const {title, searchData} = this.state;
        return (
            <View className="page">
                {/*<Image className="search-home" src={home} onClick={this.skipIndex} mode="widthFix"/>*/}
                {/*<View className="search-content flex-lr">*/}
                {/*    <View className="flex-l">*/}
                {/*        <Image className="search-icon" src={search} mode="widthFix"/>*/}
                {/*        <AtInput*/}
                {/*            placeholderClass="input-placeholder"*/}
                {/*            border={false}*/}
                {/*            name='text'*/}
                {/*            type='text'*/}
                {/*            placeholder='课程 / 地点 / 瘦身塑形'*/}
                {/*            value={title}*/}
                {/*            onBlur={this.datum.bind(this, 'title')}*/}
                {/*            onChange={this.datum.bind(this, 'title')}*/}
                {/*        />*/}
                {/*    </View>*/}
                {/*    {title && (*/}
                {/*        <View className="search-btn flex-center" onClick={this.skipContent}>搜索</View>*/}
                {/*    )}*/}
                {/*</View>*/}
                {searchData && searchData.length != 0 && (
                    <View className="search-list-wrap">
                        {/*<View className="flex-top">*/}
                        {/*    <View className="list-name">历史记录</View>*/}
                        {/*    <Image className="list-search-icon" src={search1} mode="widthFix"/>*/}
                        {/*</View>*/}
                        {/*<View className="list-item-wrap flex-l">*/}
                        {/*    {name.map((item, index) => (*/}
                        {/*        <View className="item-name flex-center" key={index} onClick={this.thTitle.bind(this, item)}>{item}</View>*/}
                        {/*    ))}*/}
                        {/*</View>*/}
                        <View className="flex-top">
                            <View className="list-name">人数</View>
                        </View>
                        <View className="list-item-wrap flex-l">
                            {searchData.classScales.map((item, index) => (
                                <View className="item-name flex-center" key={index} onClick={this.thTitle.bind(this, item, 1)}>{item.scaleName}</View>
                            ))}
                        </View>
                        <View className="flex-top">
                            <View className="list-name">课程类型</View>
                        </View>
                        <View className="list-item-wrap flex-l">
                            {searchData.classTypes.map((item, index) => (
                                <View className="item-name flex-center" key={index} onClick={this.thTitle.bind(this, item, 2)}>{item.classTypeName}</View>
                            ))}
                        </View>
                        <View className="flex-top">
                            <View className="list-name">时间</View>
                        </View>
                        <View className="list-item-wrap flex-l">
                            {searchData.periods.map((item, index) => (
                                <View className="item-name flex-center" key={index} onClick={this.thTitle.bind(this, item, 3)}>{item.periodName}</View>
                            ))}
                        </View>
                        <View className="flex-top">
                            <View className="list-name">日期</View>
                        </View>
                        <View className="list-item-wrap flex-l">
                            {searchData.weekDays.map((item, index) => (
                                <View className="item-name flex-center" key={index} onClick={this.thTitle.bind(this, item, 4)}>{item.classDate}</View>
                            ))}
                        </View>
                    </View>
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {getData} = state;
    return {
        getData
    }
};

const mapDispatchToProps = {
    getSearchTitle: actionCreator.getSearchTitle,
};

export default connect(mapStateToProps, mapDispatchToProps)(CourseDetail);



